<template>
	<div>
		<el-row style="margin-top:10px;">
			<el-col :span="3" :offset="20" style="text-align:right;">
				<router-link to="/">返回首页</router-link>
			</el-col>
			<el-col :span="8" :offset="8" style="text-align:center;line-height:45px;font-size:16pt;">全科医生临床诊疗辅助系统统计详情</el-col>
			<el-col :span="10" :offset="7">
				 <el-date-picker
			      v-model="dateRange"
			      type="datetimerange"
			      value-format="yyyy-MM-dd HH:mm:ss"
			      align="right"
			      start-placeholder="开始时间"
			      end-placeholder="结束时间"
			      :default-time="['00:00:00', '23:59:59']">
			    </el-date-picker>
				<el-button type="primary" round @click="drawChart">开始统计</el-button>
			</el-col>
		</el-row>
<!-- 		<el-row style="margin-top:60px;">
			<el-col>
				<el-carousel indicator-position="outside" arrow="always" :autoplay="false" type="card" height="600px">
				    <el-carousel-item>
				    	<div ref="oneChart" style="width: 100%; height: 100%"></div>
				    </el-carousel-item>
				    <el-carousel-item>
				      <div ref="twoChart" style="width: 100%; height: 90%"></div>
				      <div style="color:#004A80;font-weight:bolder;font-size:14pt;">当前时间段内滞留中位数是：<span style="color:orange;">112</span></div>
				    </el-carousel-item>
				    <el-carousel-item>
				      <div ref="threeChart" style="width: 100%; height: 100%"></div>
				    </el-carousel-item>
				    <el-carousel-item>
				      <div ref="fourChart" style="width: 100%; height: 100%"></div>
				    </el-carousel-item>
				</el-carousel>
			</el-col>
		</el-row> -->
		<el-row>
			<el-col :span="20" :offset="2" class="chartDiv">
				<el-row>
					<el-col class="chartTile">
						<i class="el-icon-caret-right"></i>各级患者占比
					</el-col>
					<el-col class="chartCard">
						<el-row>
							<el-col>
								<el-table
							    :data="degreeProportion"
							    stripe
    							border
							    style="width: 100%">
							    <el-table-column label="I级心脏骤停" header-align="center">
							    	<el-table-column label="人次" header-align="center">
								      <template slot-scope="scope">
								        <span >{{scope.row.degreeOne}}</span>
								      </template>
								    </el-table-column>
								    <el-table-column label="占比" header-align="center">
								      <template slot-scope="scope">
								        <span v-if="scope.row.degreeAll">{{(scope.row.degreeOne*100/scope.row.degreeAll).toFixed(2)}}%</span>
								      </template>
								    </el-table-column>
							    </el-table-column>
							    <el-table-column label="II级危重病人" header-align="center">
								    <el-table-column label="人次" header-align="center">
								      <template slot-scope="scope">
								        <span >{{scope.row.degreeTwo}}</span>
								      </template>
								    </el-table-column>
								    <el-table-column label="占比" header-align="center">
								      <template slot-scope="scope">
								        <span v-if="scope.row.degreeAll">{{(scope.row.degreeTwo*100/scope.row.degreeAll).toFixed(2)}}%</span>
								      </template>
								    </el-table-column>
							    </el-table-column>
							    <el-table-column label="III级急诊病人" header-align="center">
							      <el-table-column label="人次">
								      <template slot-scope="scope">
								        <span >{{scope.row.degreeThree}}</span>
								      </template>
								    </el-table-column>
								    <el-table-column label="占比" header-align="center">
								      <template slot-scope="scope">
								        <span v-if="scope.row.degreeAll">{{(scope.row.degreeThree*100/scope.row.degreeAll).toFixed(2)}}%</span>
								      </template>
								    </el-table-column>
							    </el-table-column>
							    <el-table-column label="IV级非急诊病人" header-align="center">
							      <el-table-column label="人次" header-align="center">
								      <template slot-scope="scope">
								        <span >{{scope.row.degreeFour}}</span>
								      </template>
								    </el-table-column>
								    <el-table-column label="占比" header-align="center">
								      <template slot-scope="scope">
								        <span v-if="scope.row.degreeAll">{{(scope.row.degreeFour*100/scope.row.degreeAll).toFixed(2)}}%</span>
								      </template>
								    </el-table-column>
							    </el-table-column>
							 </el-table>
							</el-col>
							<el-col style="text-align:center;">
								<div ref="oneChart" style="width: 100%; height: 430px;"></div>
							</el-col>
						</el-row>
					</el-col>
				</el-row>
			</el-col>

			<el-col :span="20" :offset="2" class="chartDiv">
				<el-row>
					<el-col class="chartTile">
						<i class="el-icon-caret-right"></i>患者滞留时间（分钟）
					</el-col>
					<el-col class="chartCard">
						<el-row>
							<el-col style="color:#004A80;font-weight:bolder;font-size:14pt; text-align:center;">
								当前时间段内滞留中位数是：<span style="color:orange;">{{median}}</span>
							</el-col>
							<el-col style="text-align:center;">
								<div ref="twoChart" style="width: 100%; height: 500px;"></div>
							</el-col>
						</el-row>
					</el-col>
				</el-row>
			</el-col>
		
			<!-- <el-col :span="20" :offset="2" class="chartDiv">
				<el-row>
					<el-col class="chartTile">
						<i class="el-icon-caret-right"></i>各疾病占比
					</el-col>
					<el-col class="chartCard">
						<el-row>
							<el-col>
								<el-table
								    
								    stripe
	    							border
								    style="width: 100%">
								    <el-table-column label="序号" header-align="center">
								      <template slot-scope="scope">
								        <span ></span>
								      </template>
								    </el-table-column>
								    <el-table-column
								      label="疾病名称" header-align="center">
								      <template slot-scope="scope">
								      	<span></span>
								      </template>
								    </el-table-column>
								    <el-table-column label="疾病频次" header-align="center">
								      <template slot-scope="scope">
								      	<span></span>
								      </template>
								    </el-table-column>
								    <el-table-column
								      label="疾病占比" header-align="center">
								      <template slot-scope="scope">
								      	<span></span>
								      </template>
								    </el-table-column>
								 </el-table>
							</el-col>
							<el-col style="text-align:center;">
								<div ref="threeChart" style="width: 100%; height: 400px;"></div>
							</el-col>
						</el-row>
					</el-col>
				</el-row>
			</el-col> -->

			<el-col :span="20" :offset="2" class="chartDiv">
				<el-row>
					<el-col class="chartTile">
						<i class="el-icon-caret-right"></i>患者分布
					</el-col>
					<el-col class="chartCard">
						<el-row>
							<el-col>
								<el-table
								    :data="patientDistribute"
								    stripe
	    							border
								    style="width: 100%">
								    <el-table-column label="性别分布" header-align="center">
									    <el-table-column label="男性患者" header-align="center">
									      	<el-table-column label="人次" header-align="center">
										      <template slot-scope="scope">
										        <span>{{scope.row.male}}</span>
										      </template>
									    	</el-table-column>
									    	<el-table-column label="占比" header-align="center">
										      <template slot-scope="scope">
										        <span v-if="scope.row.total">{{(scope.row.male*100/scope.row.total).toFixed(2)}}%</span>
										      </template>
									    	</el-table-column>
									    </el-table-column>
									    <el-table-column label="女性患者" header-align="center">
									      <el-table-column label="人次" header-align="center">
										      <template slot-scope="scope">
										        <span>{{scope.row.female}}</span>
										      </template>
									    	</el-table-column>
									    	<el-table-column label="占比" header-align="center">
										      <template slot-scope="scope">
										        <span v-if="scope.row.total">{{(scope.row.female*100/scope.row.total).toFixed(2)}}%</span>
										      </template>
									    	</el-table-column>
									    </el-table-column>
									</el-table-column>
									<el-table-column label="年龄段分布" header-align="center">
									    <el-table-column label="1岁内婴儿" header-align="center">
										      <el-table-column label="人次" header-align="center">
										      <template slot-scope="scope">
										        <span>{{scope.row.age1inner}}</span>
										      </template>
									    	</el-table-column>
									    	<el-table-column label="占比" header-align="center">
										      <template slot-scope="scope">
										        <span v-if="scope.row.total">{{(scope.row.age1inner*100/scope.row.total).toFixed(2)}}%</span>
										      </template>
									    	</el-table-column>
									    </el-table-column>
									    <el-table-column  label="1-3岁儿童" header-align="center">
										      <el-table-column label="人次" header-align="center">
										      <template slot-scope="scope">
										        <span>{{scope.row.age1to3}}</span>
										      </template>
									    	</el-table-column>
									    	<el-table-column label="占比" header-align="center">
										      <template slot-scope="scope">
										        <span v-if="scope.row.total">{{(scope.row.age1to3*100/scope.row.total).toFixed(2)}}%</span>
										      </template>
									    	</el-table-column>
									    </el-table-column>
									    <el-table-column label="4-7岁儿童" header-align="center">
									      <el-table-column label="人次" header-align="center">
										      <template slot-scope="scope">
										        <span>{{scope.row.age4to7}}</span>
										      </template>
									    	</el-table-column>
									    	<el-table-column label="占比" header-align="center">
										      <template slot-scope="scope">
										        <span v-if="scope.row.total">{{(scope.row.age4to7*100/scope.row.total).toFixed(2)}}%</span>
										      </template>
									    	</el-table-column>
									    </el-table-column>
									    <el-table-column  label="8-14岁儿童" header-align="center">
									      <el-table-column label="人次" header-align="center">
										      <template slot-scope="scope">
										        <span>{{scope.row.age8to14}}</span>
										      </template>
									    	</el-table-column>
									    	<el-table-column label="占比" header-align="center">
										      <template slot-scope="scope">
										        <span v-if="scope.row.total">{{(scope.row.age8to14*100/scope.row.total).toFixed(2)}}%</span>
										      </template>
									    	</el-table-column>
									    </el-table-column>
									    <el-table-column  label="成人" header-align="center">
									      <el-table-column label="人次" header-align="center">
										      <template slot-scope="scope">
										        <span>{{scope.row.age15}}</span>
										      </template>
									    	</el-table-column>
									    	<el-table-column label="占比" header-align="center">
										      <template slot-scope="scope">
										        <span v-if="scope.row.total">{{(scope.row.age15*100/scope.row.total).toFixed(2)}}%</span>
										      </template>
									    	</el-table-column>
									    </el-table-column>
									</el-table-column>
								 </el-table>
							</el-col>
							<el-col style="text-align:center;">
								<div ref="fourChart" style="width: 100%; height: 400px;"></div>
							</el-col>
						</el-row>
					</el-col>
				</el-row>
			</el-col>

			<!-- <el-col :span="20" :offset="2" class="chartDiv">
				<el-row>
					<el-col class="chartTile">
						<i class="el-icon-caret-right"></i>各药物占比
					</el-col>
					<el-col class="chartCard">
						<el-row>
							<el-col>
								<el-table
								    
								    stripe
	    							border
								    style="width: 100%">
								    <el-table-column label="序号" header-align="center">
								      <template slot-scope="scope">
								        <span ></span>
								      </template>
								    </el-table-column>
								    <el-table-column
								      label="药物名称" header-align="center">
								      <template slot-scope="scope">
								      	<span></span>
								      </template>
								    </el-table-column>
								    <el-table-column label="药物频次" header-align="center">
								      <template slot-scope="scope">
								      	<span></span>
								      </template>
								    </el-table-column>
								    <el-table-column
								      label="药物占比" header-align="center">
								      <template slot-scope="scope">
								      	<span></span>
								      </template>
								    </el-table-column>
								 </el-table>
							</el-col>
							<el-col style="text-align:center;">
								<div ref="fiveChart" style="width: 100%; height: 400px;"></div>
							</el-col>
						</el-row>
					</el-col>
				</el-row>
			</el-col> -->
		</el-row>
	</div>
</template>
<script type="text/javascript">
	// 引入基本模板
	let echarts = require('echarts/lib/echarts')
	require('echarts/lib/chart/bar')
	require('echarts/lib/chart/pie')
	require('echarts/lib/chart/line')
	// 引入提示框和title组件
	require('echarts/lib/component/tooltip')
	require('echarts/lib/component/title')
	require("echarts/lib/component/legend")
	export default{
		name:"Statistic",
		data(){
			return {
				dateRange:'',
				median:0,
				curUser:'',
				degreeProportion:[],
				retentionTime:[],
				patientDistribute:[]
			}
		},
		created:function(){
			var curUser =  JSON.parse(localStorage.getItem('curUser'));
			this.curUser = curUser;
		},
		methods:{
			drawChart:function(){
				if (!this.dateRange) {
					this.$notify({
			          title: '时间范围为空',
			          message: '请选择要统计的时间范围',
			          type: 'warning'
			        });
			        return;
				}
				this.$store.commit({
					type:"setIsLoading",
					isLoading: true
				});
				var vm =this;
				$.ajax({
						type:"post",
						url:CONST.url+"getStatistic",
						data:{
							"startTime": vm.dateRange[0],
							"endTime": vm.dateRange[1],
							"doctor":vm.curUser.userName+'-'+vm.curUser.userCode
						},
						success:function(result){
							if (result.code==0||result.code=='0') {
								vm.degreeProportion = [];
								vm.retentionTime = [];
								vm.patientDistribute = []
								if (result.data.degreeStatistic) {
									vm.degreeProportion.push(result.data.degreeStatistic);
								}
								if (result.data.patientDistribute) {
									vm.patientDistribute.push(result.data.patientDistribute);
								}

								vm.median = result.data.median;
								vm.retentionTime = result.data.retentionTime;
								vm.drawOneChart();
								vm.drawTwoChart();
								//vm.drawThreeChart();
								vm.drawFourChart();
								//vm.drawFiveChart();

								vm.$store.commit({
									type:"setIsLoading",
									isLoading: false
								});

							}else{
								alert(result.msg);
							}
						},
						error:function(){
							alert("请求失败！");
						}
					});
			},
			drawThreeChart:function(){
				 // 基于准备好的dom，初始化echarts实例
		        let myChart = echarts.init(this.$refs.threeChart);
		        // 绘制图表
		        myChart.setOption({
				    tooltip : {
				        trigger: 'item',
				        formatter: "{a} <br/>{b} : {c} ({d}%)"
				    },
				    legend: {
				        bottom: 10,
				        left: 'center',
				        data: ['疾病1','疾病2','疾病3','疾病4']
				    },
				    series : [
				        {
				            name: '疾病占比',
				            type: 'pie',
				            radius : '60%',
				            center: ['50%', '50%'],
				            data:[
				                {value:1, name:'疾病1'},
				                {value:50, name:'疾病2'},
				                {value:19, name:'疾病3'},
				                {value:102, name:'疾病4'}
				            ],
				            itemStyle: {
				                emphasis: {
				                    shadowBlur: 10,
				                    shadowOffsetX: 5,
				                    shadowColor: 'rgba(0, 0, 0, 0.5)'
				                }
				            }
				        }
				    ]
				});
			},
			drawTwoChart:function(){
				 // 基于准备好的dom，初始化echarts实例
		        let myChart = echarts.init(this.$refs.twoChart);
		        var data = this.retentionTime;
				var dateList = data.map(function (item,index) {
				    return "患者"+index;
				});
				var valueList = data.map(function (item) {
				    return item;
				});
		        // 绘制图表
		        myChart.setOption({
				    // Make gradient line here
				    visualMap: [{
				        show: false,
				        type: 'continuous',
				        seriesIndex: 0,
				        min: 0,
				        max: 10
				    }],
				    tooltip: {
				        trigger: 'axis',
				        formatter: "滞留时间 <br/>{b} : {c}"
				    },
				    xAxis: [{
				        data: dateList
				    }],
				    yAxis: [{
				        splitLine: {show:true}
				    }],
				    grid: [{
				        bottom: '10%'
				    }],
				    series: [{
				        type: 'line',
				        showSymbol: false,
				        data: valueList
				    }]
				});
			},
			drawOneChart:function(){
				 // 基于准备好的dom，初始化echarts实例
		        let myChart = echarts.init(this.$refs.oneChart);
		        // 绘制图表
		        myChart.setOption({
				    tooltip : {
				        trigger: 'item',
				        formatter: "{a} <br/>{b} : {c} ({d}%)"
				    },
				    legend: {
				        bottom: 50,
				        left: 'center',
				        data: ['I级心脏骤停','II级危重病人','III级急诊病人','IV级非急诊病人']
				    },
				    series : [
				        {
				            name: '级别占比',
				            type: 'pie',
				            radius : '60%',
				            center: ['50%', '40%'],
				            data:[
				                {value:this.degreeProportion[0].degreeOne, name:'I级心脏骤停'},
				                {value:this.degreeProportion[0].degreeTwo, name:'II级危重病人'},
				                {value:this.degreeProportion[0].degreeThree, name:'III级急诊病人'},
				                {value:this.degreeProportion[0].degreeFour, name:'IV级非急诊病人'}
				            ],
				            itemStyle: {
				                emphasis: {
				                    shadowBlur: 10,
				                    shadowOffsetX: 5,
				                    shadowColor: 'rgba(0, 0, 0, 0.5)'
				                }
				            }
				        }
				    ]
				});
			},
			drawFourChart:function(){
				// 基于准备好的dom，初始化echarts实例
		        let myChart = echarts.init(this.$refs.fourChart);
		        // 绘制图表
		        myChart.setOption({
				    tooltip: {
				        trigger: 'item',
				        formatter: "{a} <br/>{b}: {c} ({d}%)"
				    },
				    series: [
				        {
				            name:'患者性别',
				            type:'pie',
				            selectedMode: 'single',
				            radius: [0, '30%'],

				            label: {
				                normal: {
				                    position: 'inner'
				                }
				            },
				            labelLine: {
				                normal: {
				                    show: false
				                }
				            },
				            data:[
				                {value:this.patientDistribute[0].male, name:'男性'},
				                {value:this.patientDistribute[0].female, name:'女性'},
				            ]
				        },
				        {
				            name:'患者类型',
				            type:'pie',
				            radius: ['50%', '75%'],
				            data:[
				                {value:this.patientDistribute[0].age15, name:'成人'},
				                {value:this.patientDistribute[0].age1inner, name:'1岁内婴儿'},
				                {value:this.patientDistribute[0].age1to3, name:'1-3岁儿童'},
				                {value:this.patientDistribute[0].age4to7, name:'4-7岁儿童'},
				                {value:this.patientDistribute[0].age8to14, name:'8-14岁儿童'}
				            ]
				        }
				    ]
				});
			},
			drawFiveChart:function(){
				 // 基于准备好的dom，初始化echarts实例
		        let myChart = echarts.init(this.$refs.fiveChart);
		        // 绘制图表
		        myChart.setOption({
				    tooltip : {
				        trigger: 'item',
				        formatter: "{a} <br/>{b} : {c} ({d}%)"
				    },
				    legend: {
				        bottom: 10,
				        left: 'center',
				        data: ['药物1','药物2','药物3','药物4']
				    },
				    series : [
				        {
				            name: '药物占比',
				            type: 'pie',
				            radius : '60%',
				            center: ['50%', '50%'],
				            data:[
				                {value:1, name:'药物1'},
				                {value:5, name:'药物2'},
				                {value:19, name:'药物3'},
				                {value:12, name:'药物4'}
				            ],
				            itemStyle: {
				                emphasis: {
				                    shadowBlur: 10,
				                    shadowOffsetX: 5,
				                    shadowColor: 'rgba(0, 0, 0, 0.5)'
				                }
				            }
				        }
				    ]
				});
			}

		},
		watch:{
			dateRange:{
				handler(curVal,oldVal){
					
				}
			}
		}
	}
</script>
<style type="text/css">
  .el-carousel__item {
    border: 1px solid #cccccc;
    background-color: #ffffff;
  }
  .chartCard{
  	background-color: #ffffff;
  	margin-top: 2px;
  	border: 1px solid #cccccc;
  	text-align: left;
  	line-height: 35px;
  }
  .chartDiv{
  	margin-top: 15px;
  }
  .chartTile{
  	text-align: left;
  	font-size: 14pt;
  	font-weight: bolder;
  	padding-left: 15px;
  }
</style>